<!--
 * @Author: your name
 * @Date: 2021-06-27 14:37:19
 * @LastEditTime: 2021-06-27 15:49:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xbsg-platform-ui\src\views\smartParks\community\ownner\editOwnner.vue
-->
<template>
    <div class="tacitly">
   <!-- 添加或修改业主对话框 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="业主姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入业主姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="女" value="0" />
          <el-option label="男" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机" />
        </el-form-item>
        <el-form-item label="qq" prop="qq">
          <el-input v-model="form.qq" placeholder="请输入qq" />
        </el-form-item>
        <el-form-item label="照片" prop="photo">
          <!-- <el-input v-model="form.photo" placeholder="请输入照片" /> -->
          
        <ImageUpload v-model="form.photo" :min-height="192" />
        </el-form-item>
        <el-form-item label="小区ID" prop="communityId">
          <el-input v-model="form.communityId" placeholder="请输入小区ID" />
        </el-form-item>
        <el-form-item label="删除标志" prop="delFlag">
          <el-select v-model="form.delFlag" placeholder="请选择">
          <el-option label="正常" value="0" />
          <el-option label="删除" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
</template>

<script>
import { getOwnner,addOwnner, updateOwnner } from "@/api/community/ownner";
import ImageUpload from "@/components/ImageUpload";
export default {
  components: {
    ImageUpload,
  },
    data() {
        return {
// 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "业主姓名不能为空", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机不能为空", trigger: "blur" }
        ],
        qq: [
          { required: true, message: "qq不能为空", trigger: "blur" }
        ],
        photo: [
          { required: true, message: "照片不能为空", trigger: "blur" }
        ],
        communityId: [
          { required: true, message: "小区ID不能为空", trigger: "blur" }
        ],
        delFlag: [
          { required: true, message: "删除标志(0正常 1删除)不能为空", trigger: "blur" }
        ],
      }
        };
    },
  beforeRouteEnter(to, from, next) {
    if (to.query.id) {
      to.meta.title = "编辑业主";
    } else {
      to.meta.title = "新增业主";
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch("tagsView/delView", this.$route);
    next();
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getOwnnerInfo();
    }
  },
    mounted() {

    },
    methods: {
getOwnnerInfo(){
      getOwnner(this.form.id ).then(response => {
        this.form = response.data;
      });
},
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        sex: null,
        age: null,
        idCard: null,
        phone: null,
        qq: null,
        photo: null,
        communityId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
        tenantId: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateOwnner(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.getList();
            });
          } else {
            addOwnner(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.getList();
            });
          }
        }
      });
    },
    }
};
</script>

<style scoped lang="scss">

.tacitly {
  padding: 20px;
  box-sizing: border-box;
  width: 50%;
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}
</style>
